/**
 * 客户端 webpack 打包基础配置
 */
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const chalk = require('chalk'); // webpack 自带的依赖

const ProgressBarPlugin = require('progress-bar-webpack-plugin');

const config = require("../index");
const devMod = process.env.NODE_ENV === 'development';

module.exports = {
    name: 'client',

    target: 'web', // 默认

    entry : {
        app: [
            '@babel/polyfill',
            './src/client/index.js'
        ]
    },

    output: {
        path: path.resolve(__dirname, '../../dist/client'),
        filename: devMod ? '[name].bundle.js' : '[name].[hash].js',
        publicPath: config.public_path + '/'
    },

    resolve: {
        alias: {
            '@': path.resolve(__dirname, '../../src'),
            Config: path.resolve('config/index')
        }
    },

    optimization: {
        namedModules: true,
        noEmitOnErrors: true,
        splitChunks: {
            chunks: 'all',
            minSize: 0,
            automaticNameDelimiter: '_',
            cacheGroups: {
                default: false,
                venders: false,
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: 'initial',
                    priority: 10,
                    enforce: true,
                    name: 'vendor'
                },
                common: {
                    chunks: 'all',
                    minChunks: 2,
                    name: 'common',
                    enforce: true,
                    priority: 5
                }
            }
        },
        runtimeChunk: {
            name: 'mainfest'
        }
    },

    module: {
        rules: [

            // js 文件
            {
                test: /\.(js?|css)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }, 

            // 图片文件
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240
                        }
                    }
                ]
            },

            /**
             * 加载字体文件
             */
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            limit: 10240
                        }
                    }
                ]
            },
             
            // css 文件
            {
                test: /\.css$/,
                loader: require('styled-jsx/webpack').loader
            }
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            __SERVER__: 'false',
            __CLIENT__: 'true'
        }),

        // 重点：创建一个特定模板引擎的 html 入口
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, '../../dist/server/200.ejs'),
            template: 'src/server/views/200.html',
            metaDom: '<%- meta %>',
            nonce: '<%- nonce %>',
            styles: '<%- styles %>',
            htmlDom: '<%- html %>',
            title: '<%- title %>',
            reduxState: '<%- reduxState %>'
        }),

        new ProgressBarPlugin({
            format: `  build [:bar] ${chalk.green.bold(':percent')}`,
            clear: false
        })
    ]
}